<template>
	<view>
		<view class="px-2" style="margin-bottom: 150rpx;">
			<view class="item mb-5" v-for="(item, index) in list" :key="index">
				<view class="flex align-center justify-between" style="height: 86rpx;">
					<view class="flex align-center">
						<image src="../../static/img/ic_interaction.png"
							style="width: 41rpx;height: 38rpx;margin-right: 15rpx;" mode=""></image>
						<view class="color333 font28 font-weight-500">{{ item.userName }}通话名单(可呼入呼出)</view>
					</view>
				</view>
				<view class="card bg-white rounded-lg px-2" v-for="(items, index) in item.callLiat" :key="index">
					<view class="flex align-center justify-between border-bottom" style="height: 86rpx;">
						<view class="color333 font28 font-weight-500" @click="edit(items)">{{ items.remark }}</view>
						<view class="flex align-center">
							<view class="color333 font28 font-weight-500 mr-3" @click.stop="togo(items.phone_number)">
								{{ items.phone_number }}
							</view>
							<image src="../../static/img/ic_sub.png" style="height: 30rpx;width: 30rpx;" mode="" @click="del(items.id)"></image>
						</view>
					</view>
				</view>
				<view class="flex align-center justify-between" style="height: 86rpx;">
					<view class="flex align-center">
						<image src="../../static/img/ic_interaction.png"
							style="width: 41rpx;height: 38rpx;margin-right: 15rpx;" mode=""></image>
						<view class="color333 font28 font-weight-500">{{ item.userName }}通话名单(仅限呼入)</view>
					</view>
				</view>
				<view class="card bg-white rounded-lg px-2" v-for="(items, index) in item.noCallList" :key="index">
					<view class="flex align-center justify-between border-bottom" style="height: 86rpx;">
						<view class="color333 font28 font-weight-500" @click="edit(items)">{{ items.remark }}</view>
						<view class="flex align-center">
							<view class="color333 font28 font-weight-500 mr-3" @click.stop="togo(items.phone_number)">
								{{ items.phone_number }}
							</view>
							<image src="../../static/img/ic_sub.png" style="height: 30rpx;width: 30rpx;" mode="" @click="del(items.id)"></image>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="fixed-bottom px-2 mb-5">
			<main-button @click="sumitLogin">添加白名单</main-button>
		</view>
	</view>
</template>

<script>
	import mainButton from '../../components/common/main-buttom.vue';
	export default {
		components: {
			mainButton
		},
		data() {
			return {
				list: []
			};
		},
		onLoad() {
			// location.reload();
			this.getData();
		},
		methods: {
			togo(phone) {
				uni.makePhoneCall({
					// 手机号
					phoneNumber: phone,

					// 成功回调
					success: res => {
						console.log('调用成功!');
					},

					// 失败回调
					fail: res => {
						console.log('调用失败!');
					}
				});
			},
			sumitLogin() {
				uni.navigateTo({
					url: './addlist/addlist?type=0'
				});
			},
			edit(item) {
				uni.setStorageSync('whiteItem', item)
				uni.navigateTo({
					url: './addlist/addlist?type=1'
				});
			},
			del(id) {
				let _this = this;
				uni.showModal({
					title: '提示',
					content: "是否删除？",
					success: function(res) {
						if (res.confirm) {
							let opts = {
								url: 'Jz/DeleteQqhm.shtml'
							};
							let param = {
								token: uni.getStorageSync('userInfo').token,
								userId: uni.getStorageSync('userInfo').user_id,
								ids: id
							};
							_this.$http.httpRequest(opts, param).then(
								res => {
									console.log(res.data);
									if (res.data.code == '200') {
										_this.getData();
									} else {
										uni.showToast({
											icon: 'none',
											title: res.data.msg
										});
									}
								},
								error => {
									console.log(error);
								}
							);
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
				
				
			},
			getData() {
				let _this = this;
				let opts = {
					url: 'Jz/SearchThbmd.shtml'
				};
				let param = {};
				_this.$http.httpTokenRequest(opts, param).then(
					res => {
						console.log(res.data);
						if (res.data.code == '200') {
							let list = [];
							let listInfo = uni.getStorageSync('userInfo').class_info;
							let arr = res.data.data;
							listInfo.forEach((item) => {
								const params = {
									userName: item.user_name,
									callLiat: [],
									noCallList: []
								}
								list.push(params);
							})
							arr.forEach((item) => {
								list.forEach((items) => {
									if (item.user_name == items.userName) {
										if (item.pressKey != "") {
											items.callLiat.push(item)
										} else {
											items.noCallList.push(item)
										}
									}
								})
							})
							console.log(list)
							_this.list=list
						} else {
							uni.showToast({
								icon: 'none',
								title: res.data.msg
							});
						}
					},
					error => {
						console.log(error);
					}
				);
			}
		}
	};
</script>

<style>
	page {
		background-color: #f5f5f5;
	}
</style>
